<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传-案例</title>
</head>

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    /* 
      目标：图片上传，显示到网页上
      1.获取图片文件
      2.使用 FormData 携带图片文件
      3.提交到服务器，获取图片 url 网址使用
    */
   //文件选择元素 -> change改变事件
   document.querySelector('.upload').addEventListener('change',e => {
    // 1. 获取图片文件
    console.log(e.target.files[0]);
    // 2. 使用 FormData 携带图片文件
    const fd = new FormData()
    fd.append('img',e.target.files[0])
    // 3.提交到服务器,获取图片 url 网址使用
    axios({
      url:'http://hmajax.itheima.net/api/uploadimg',
      method:'POST',
      data:fd
    }).then(result => {
      console.log(result);
      // 取出图片 url 网址，用img标签加载显示
      const imgUrl = result.data.data.url
      document.querySelector('.my-img').src = imgUrl
    })
   })
  </script>
</body>
</html>